<!--封装的组件-->
<template>
    <div class="child">
        <header>
            <h3>头部div</h3>
                <slot name="header"></slot>
        </header>
        <div class="content">
            <h3>中间div</h3>
                <!-- 等价于<slot></slot> -->
                <slot name="default"></slot>
        </div>
        <footer>
            <h3>尾部div</h3>
                <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script setup>
</script>
<style lang="less" scoped>
    header {
        background-color: rgb(0, 119, 255);
    }
    .content {
        background-color: rgb(0, 255, 102);
    }
    footer {
        background-color: rgb(223, 44, 220);
    }
</style>

